<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<div class="main-content-layout">
			<!-- 左侧部门树和搜索表单 -->
			<div class="left-panel">
				<!-- 搜索表单 -->
				<div class="search-form-wrapper">
					<div class="search-form-header">
						<el-icon><Search /></el-icon>
						<span>筛选条件</span>
					</div>
					<el-form :model="searchForm" label-position="top" size="small" class="search-form">
						<el-form-item label="姓名">
							<el-input v-model="searchForm.Name" placeholder="请输入姓名" clearable @clear="handleSearch">
								<template #prefix>
									<el-icon><User /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="工号">
							<el-input v-model="searchForm.StaffNo" placeholder="请输入工号" clearable @clear="handleSearch">
								<template #prefix>
									<el-icon><Postcard /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item class="form-actions">
							<el-button type="primary" @click="handleSearch">
								<el-icon><Search /></el-icon>
								<span>查询</span>
							</el-button>
							<el-button @click="handleReset">
								<el-icon><RefreshLeft /></el-icon>
								<span>重置</span>
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<!-- 部门树 -->
				<WtmDeptTree
					ref="deptTreeRef"
					title="筛选部门"
					@node-click="handleDeptNodeClick"
					@data-loaded="handleDeptTreeLoaded"
					@company-change="handleCompanyChange"
					:showCompanySelector="true"
					:expandFirstLevel="true"
				/>
			</div>

			<!-- 右侧主要内容 -->
			<div class="right-panel">
				<!-- 排班日历 -->
				<div class="calendar-section">
					<ScheduleCalendar
						:data="calendarData"
						:loading="loading"
						:selected-dept-id="selectedDeptId"
						:total="totalCount"
						@cell-click="handleCellClick"
						@cell-dblclick="handleCellDblClick"
						@shift-drop="handleShiftDrop"
						@cell-select="handleCellSelect"
						@batch-update="handleBatchUpdate"
						@refresh-data="handleRefreshData"
						@schedule-updated="handleScheduleUpdated"
						@date-change="handleDateChange"
						@page-change="handlePageChange"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="自由排班;true;HengTong.Areas.Hr.Controllers;SysAttendanceRecord">
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Search, Refresh, RefreshLeft, User, Postcard, Operation } from '@element-plus/icons-vue';
import ScheduleCalendar from '/@/components/scheduleCalendar/index.vue';
import { SysAttendanceRecordApi as attendanceApi } from '/@/views/hr/sysattendancerecord/api';
import { ISearchByPersonRequest } from '/@/views/hr/sysattendancerecord/api/interface';
import { SysAttendanceShiftGroupApi } from '/@/views/hr/sysattendanceshiftgroup/api';

// 响应式数据
const loading = ref(false);
const deptTreeRef = ref();
const calendarData = ref<any[]>([]);
const totalCount = ref<number>(0); // 总记录数（用于分页）
const selectedDeptId = ref<string>(''); // 选中部门ID
const shiftGroupList = ref<any[]>([]); // 班组列表

// 搜索表单
const searchForm = reactive({
	Name: '',
	OrgId: '',
	StaffNo: '',
});
// 获取指定月的第一天和最后一天
const getMonthRange = (date: Date = new Date()) => {
	const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
	const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

	// 使用本地时间格式化日期，避免时区问题
	const formatDate = (d: Date) => {
		const year = d.getFullYear();
		const month = String(d.getMonth() + 1).padStart(2, '0');
		const day = String(d.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	};

	return {
		startDate: formatDate(firstDay), // YYYY-MM-DD格式
		endDate: formatDate(lastDay),
	};
};

// 当前查询的月份
const currentDate = ref(new Date());
const currentDateRange = ref(getMonthRange(currentDate.value));
const searchParams = ref<ISearchByPersonRequest>({
	GroupId: '', // 初始为空，由部门选择后更新
	Page: 1, // 页码从1开始
	Limit: 50, // 每页50条，与分页器默认值保持一致
	IsPlainText: true,
	IsEmunToString: true,
	ShiftDate: [currentDateRange.value.startDate, currentDateRange.value.endDate],
	PersonId: '',
	Name: '',
	OrgId: '',
	StaffNo: '',
});
// 获取排班数据
const getCalendarData = async (deptId?: string, silent: boolean = false) => {
	try {
		// 静默模式下不显示全局loading，避免白屏
		if (!silent) {
			loading.value = true;
		}

		// 如果传入了部门ID，使用传入的；否则使用当前选中的部门ID
		const targetDeptId = deptId || selectedDeptId.value;

		const params = {
			...searchParams.value,
			GroupId: targetDeptId,
			Name: searchForm.Name || undefined,
			OrgId: searchForm.OrgId || undefined,
			StaffNo: searchForm.StaffNo || undefined,
		};

		const res = await attendanceApi().getSchedulingByPerson(params);

		if (res.Data && Array.isArray(res.Data)) {
			// 直接使用接口返回的数据，不做格式转换
			calendarData.value = res.Data;
			// 获取总数（用于分页）
			totalCount.value = (res as any).Count || (res as any).Total || res.Data.length;
		} else {
			calendarData.value = [];
			totalCount.value = 0;
		}
	} catch (error) {
		// 静默模式下不显示错误消息
		if (!silent) {
			ElMessage.error('获取排班数据失败');
		}
		calendarData.value = [];
	} finally {
		// 静默模式下不修改loading状态
		if (!silent) {
			loading.value = false;
		}
	}
};

// 部门树数据加载完成处理
const handleDeptTreeLoaded = (data: any[]) => {
	// 如果有部门数据且还没有选中部门，自动选择第一个部门
	if (data && data.length > 0 && !selectedDeptId.value) {
		const firstDept = data[0];
		const firstDeptId = firstDept?.Value || '';

		if (firstDeptId) {
			selectedDeptId.value = firstDeptId;
			searchParams.value.GroupId = firstDeptId;

			// 设置部门树的当前选中节点
			if (deptTreeRef.value) {
				deptTreeRef.value.setCurrentKey(firstDeptId);
			}

			// 加载第一个部门的数据
			getCalendarData(firstDeptId, false);
		}
	}
};

// 部门节点点击处理
const handleDeptNodeClick = (deptData: any) => {
	// 从部门树节点数据中提取部门ID
	const deptId = deptData?.Value || '';
	selectedDeptId.value = deptId;

	// 更新搜索参数中的部门ID
	searchParams.value.GroupId = deptId;
	// 根据选择的部门重新获取数据
	getCalendarData(deptId, false); // 显示loading
};

// 公司选择变化处理
const handleCompanyChange = (companyId: string | number, company: any) => {
	console.log('公司选择变化:', companyId, company);

	// 更新搜索表单和搜索参数中的公司ID
	searchForm.OrgId = String(companyId || '');
	searchParams.value.OrgId = String(companyId || '');

	// 清空部门选择
	selectedDeptId.value = '';
	searchParams.value.GroupId = '';

	// 重新加载数据（如果选择了公司）
	if (companyId) {
		// 部门树已经会自动刷新，这里只需要清空右侧的日历数据
		// 等用户选择部门后再加载
		calendarData.value = [];
		totalCount.value = 0;
	}
};

// 日历事件处理
const handleCellClick = (data: any) => {
	console.log('单元格点击:', data);
};

const handleCellDblClick = (data: any) => {
	console.log('单元格双击:', data);
};

const handleShiftDrop = (data: any) => {
	console.log('班次拖拽:', data);
};

const handleCellSelect = (data: any) => {
	console.log('单元格选择:', data);
};

const handleBatchUpdate = (data: any) => {
	console.log('批量更新:', data);
	ElMessage.info('批量更新功能待实现');
};

// 处理刷新数据事件
const handleRefreshData = async () => {
	try {
		// 重新获取当前选中部门的排班数据
		await getCalendarData(selectedDeptId.value, false); // 显示loading
	} catch (error) {
		console.error('刷新数据失败:', error);
	}
};

// 处理排班更新事件（自动刷新数据）
const handleScheduleUpdated = async (data: any) => {
	try {
		// 如果是静默更新，则延迟刷新，避免立即重新渲染
		if (data?.silent) {
			// 延迟5秒后静默刷新数据，确保服务器数据已更新
			setTimeout(async () => {
				try {
					await getCalendarData(selectedDeptId.value, true); // 静默模式
				} catch (error) {
					console.error('后台数据刷新失败:', error);
				}
			}, 5000);
		} else {
			await getCalendarData(selectedDeptId.value, true); // 静默模式，避免白屏
		}
	} catch (error) {
		console.error('自动刷新数据失败:', error);
		// 静默处理错误，不显示错误消息，避免干扰用户体验
	}
};

const handleDateChange = async (data: { year: number; month: number }) => {
	try {
		// 根据传入的年月创建新的日期对象
		const newDate = new Date(data.year, data.month - 1, 1);
		currentDate.value = newDate;

		// 重新计算日期范围
		currentDateRange.value = getMonthRange(newDate);
		// 更新搜索参数中的日期
		searchParams.value.ShiftDate = [currentDateRange.value.startDate, currentDateRange.value.endDate];
		// 重新获取日历数据
		await getCalendarData(selectedDeptId.value, false); // 显示loading
	} catch (error) {
		console.error('切换月份失败:', error);
		ElMessage.error('切换月份失败，请重试');
	}
};

// 处理分页变化事件
const handlePageChange = async (data: { page: number; limit: number }) => {
	try {
		console.log('分页变化:', data);
		// 更新搜索参数
		searchParams.value.Page = data.page;
		searchParams.value.Limit = data.limit;
		// 重新获取数据
		await getCalendarData(selectedDeptId.value, false); // 显示loading
	} catch (error) {
		console.error('分页变化处理失败:', error);
		ElMessage.error('分页变化处理失败，请重试');
	}
};

// 获取班组列表
const getShiftGroupList = async () => {
	try {
		const res = await SysAttendanceShiftGroupApi().search({});
		if (res.Data && Array.isArray(res.Data)) {
			shiftGroupList.value = res.Data;
		}
	} catch (error) {
		console.error('获取班组列表失败:', error);
	}
};

// 搜索处理
const handleSearch = async () => {
	// 更新搜索参数
	searchParams.value.Name = searchForm.Name;
	searchParams.value.OrgId = searchForm.OrgId;
	searchParams.value.StaffNo = searchForm.StaffNo;
	// 重置分页到第一页
	searchParams.value.Page = 1;
	// 重新加载数据
	await getCalendarData(selectedDeptId.value, false);
};

// 重置搜索
const handleReset = () => {
	searchForm.Name = '';
	searchForm.OrgId = '';
	searchForm.StaffNo = '';
	handleSearch();
};

// 页面初始化
onMounted(() => {
	// 加载班组列表
	getShiftGroupList();
	// 不再在这里直接调用 getCalendarData
	// 等待部门树加载完成后，在 handleDeptTreeLoaded 中自动选择第一个部门并加载数据
});
</script>

<style scoped lang="scss">
.main-content-layout {
	display: flex;
	height: 100%;
	gap: 16px;
}

.left-panel {
	width: 300px;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	overflow-y: auto;

	:deep(.wtm-dept-tree) {
		flex: 1;
		min-height: 400px;
		overflow: auto;
	}
}

.search-form-wrapper {
	background: #fff;
	border-radius: 12px;
	overflow: visible;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:hover {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}

	.search-form-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 12px 16px;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 8px;

		i {
			font-size: 16px;
		}
	}

	.search-form {
		padding: 16px;

		:deep(.el-form-item) {
			margin-bottom: 16px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		:deep(.el-form-item__label) {
			font-weight: 500;
			color: #606266;
			margin-bottom: 8px;
			font-size: 13px;
		}

		:deep(.el-input__wrapper) {
			border-radius: 8px;
			box-shadow: 0 0 0 1px #dcdfe6 inset;
			transition: all 0.2s;

			&:hover {
				box-shadow: 0 0 0 1px #c0c4cc inset;
			}

			&.is-focus {
				box-shadow: 0 0 0 1px #667eea inset !important;
			}
		}

		:deep(.el-select) {
			.el-select__wrapper {
				border-radius: 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
				transition: all 0.2s;

				&:hover {
					box-shadow: 0 0 0 1px #c0c4cc inset;
				}

				&.is-focused {
					box-shadow: 0 0 0 1px #667eea inset !important;
				}
			}
		}
	}

	.form-actions {
		margin-top: 20px;

		:deep(.el-form-item__label) {
			display: none !important;
		}

		:deep(.el-form-item__content) {
			display: flex;
			gap: 8px;
			margin-left: 0 !important;
		}

		:deep(.el-button) {
			flex: 1;
			border-radius: 8px;
			font-weight: 500;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;

			&.el-button--primary {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				border: none;
				box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
				}

				&:active {
					transform: translateY(0);
				}
			}

			&.el-button--default {
				background: #f5f7fa;
				border: 1px solid #dcdfe6;
				color: #606266;

				&:hover {
					background: #ecf0f6;
					border-color: #c0c4cc;
				}
			}
		}
	}
}

.right-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
}

// 确保日历区域占满整个右侧面板
.calendar-section {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ==================== 暗黑模式适配 ==================== */
[data-theme='dark'],
.dark {
	/* 主要布局容器暗黑模式 */
	.main-content-layout {
		background: var(--next-bg-main-color, #1f1f1f);
		color: var(--next-text-color-regular, #e5eaf3);
	}

	/* 左侧面板暗黑模式样式 */
	.left-panel {
		background: transparent;
		border-right: 1px solid var(--next-border-color, #424242);
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);

		/* 搜索表单暗黑模式 */
		.search-form-wrapper {
			background: var(--next-color-primary, #303030) !important;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);

			&:hover {
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
			}

			.search-form-header {
				background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
			}

			.search-form {
				:deep(.el-form-item__label) {
					color: var(--next-text-color-regular, #e5eaf3) !important;
				}

				:deep(.el-input__wrapper) {
					background: var(--next-bg-main-color, #1f1f1f) !important;
					box-shadow: 0 0 0 1px var(--next-border-color, #424242) inset !important;

					.el-input__inner {
						color: var(--next-text-color-regular, #e5eaf3) !important;
						background: transparent !important;

						&::placeholder {
							color: var(--next-text-color-placeholder, #9b9da1) !important;
						}
					}

					.el-input__prefix,
					.el-input__suffix {
						color: var(--next-text-color-placeholder, #9b9da1) !important;
					}

					&:hover {
						box-shadow: 0 0 0 1px var(--next-border-color, #606266) inset !important;
					}

					&.is-focus {
						box-shadow: 0 0 0 1px #4facfe inset !important;
					}
				}

				:deep(.el-select) {
					.el-select__wrapper {
						background: var(--next-bg-main-color, #1f1f1f) !important;
						box-shadow: 0 0 0 1px var(--next-border-color, #424242) inset !important;

						.el-select__selected-item {
							color: var(--next-text-color-regular, #e5eaf3) !important;
						}

						.el-select__placeholder {
							color: var(--next-text-color-placeholder, #9b9da1) !important;
						}

						.el-select__suffix,
						.el-select__prefix {
							color: var(--next-text-color-placeholder, #9b9da1) !important;
						}

						&:hover {
							box-shadow: 0 0 0 1px var(--next-border-color, #606266) inset !important;
						}

						&.is-focused {
							box-shadow: 0 0 0 1px #4facfe inset !important;
						}
					}
				}

				.form-actions {
					:deep(.el-button) {
						&.el-button--primary {
							background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
							border: none !important;
							box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);

							&:hover {
								transform: translateY(-2px);
								box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
							}

							&:active {
								transform: translateY(0);
							}
						}

						&.el-button--default {
							background: var(--next-bg-main-color, #1f1f1f) !important;
							border-color: var(--next-border-color, #424242) !important;
							color: var(--next-text-color-regular, #e5eaf3) !important;

							&:hover {
								background: var(--next-color-hover, #3c3c3c) !important;
								border-color: var(--next-border-color, #606266) !important;
							}
						}
					}
				}
			}
		}

		/* 筛选表单暗黑模式 */
		.filter-form {
			background: var(--next-color-primary, #303030);

			/* Element Plus 组件暗黑模式覆盖 */
			:deep(.el-form-item__label) {
				color: var(--next-text-color-regular, #e5eaf3) !important;
			}

			:deep(.el-input__wrapper) {
				background: var(--next-bg-main-color, #1f1f1f) !important;
				border: 1px solid var(--next-border-color, #424242) !important;
				box-shadow: none !important;

				.el-input__inner {
					color: var(--next-text-color-regular, #e5eaf3) !important;
					background: transparent !important;

					&::placeholder {
						color: var(--next-text-color-placeholder, #9b9da1) !important;
					}
				}

				&:hover {
					border-color: var(--next-border-color, #424242) !important;
				}

				&.is-focus {
					border-color: #409eff !important;
					box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
				}
			}

			:deep(.el-select) {
				.el-select__wrapper {
					background: var(--next-bg-main-color, #1f1f1f) !important;
					border: 1px solid var(--next-border-color, #424242) !important;
					box-shadow: none !important;

					.el-select__selected-item {
						color: var(--next-text-color-regular, #e5eaf3) !important;
					}

					.el-select__placeholder {
						color: var(--next-text-color-placeholder, #9b9da1) !important;
					}

					.el-select__suffix {
						color: var(--next-text-color-placeholder, #9b9da1) !important;
					}
				}
			}

			:deep(.el-date-editor) {
				.el-input__wrapper {
					background: var(--next-bg-main-color, #1f1f1f) !important;
					border: 1px solid var(--next-border-color, #424242) !important;
				}
			}

			:deep(.el-button) {
				&.el-button--primary {
					background: linear-gradient(135deg, #409eff 0%, #337ecc 100%) !important;
					border-color: #409eff !important;

					&:hover {
						background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%) !important;
						transform: translateY(-1px);
						box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
					}
				}

				&.el-button--default {
					background: var(--next-color-primary, #303030) !important;
					border-color: var(--next-border-color, #424242) !important;
					color: var(--next-text-color-regular, #e5eaf3) !important;

					&:hover {
						background: var(--next-color-hover, #3c3c3c) !important;
						border-color: var(--next-border-color, #424242) !important;
					}
				}
			}
		}

		/* 统计信息卡片暗黑模式 */
		.stats-cards {
			.stat-card {
				background: var(--next-bg-main-color, #1f1f1f) !important;
				border: 1px solid var(--next-border-color, #424242) !important;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;

				&:hover {
					background: var(--next-color-hover, #3c3c3c) !important;
					transform: translateY(-2px);
					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
				}

				.stat-label {
					color: var(--next-text-color-placeholder, #9b9da1) !important;
				}

				.stat-value {
					color: var(--next-text-color-regular, #e5eaf3) !important;

					&.primary {
						color: #409eff !important;
					}

					&.success {
						color: #67c23a !important;
					}

					&.warning {
						color: #e6a23c !important;
					}

					&.danger {
						color: #f56c6c !important;
					}
				}

				.stat-icon {
					opacity: 0.7;
				}
			}
		}
	}

	/* 日历区域暗黑模式 */
	.calendar-section {
		background: var(--next-bg-main-color, #1f1f1f);

		/* 工具栏暗黑模式 */
		.calendar-toolbar {
			background: var(--next-color-primary, #303030) !important;
			border-bottom: 1px solid var(--next-border-color, #424242) !important;

			.toolbar-left,
			.toolbar-center,
			.toolbar-right {
				.el-button {
					&.el-button--primary {
						background: linear-gradient(135deg, #409eff 0%, #337ecc 100%) !important;
						border-color: #409eff !important;
					}

					&.el-button--default {
						background: var(--next-color-primary, #303030) !important;
						border-color: var(--next-border-color, #424242) !important;
						color: var(--next-text-color-regular, #e5eaf3) !important;

						&:hover {
							background: var(--next-color-hover, #3c3c3c) !important;
						}
					}
				}

				.current-date {
					color: var(--next-text-color-regular, #e5eaf3) !important;
				}
			}
		}

		/* 日历组件暗黑模式已在 scheduleCalendar 中处理 */
	}
}

/* ==================== 响应式设计 ==================== */

/* 大屏幕优化 (>1440px) */
@media (min-width: 1440px) {
	.left-panel {
		width: 320px;
		min-width: 320px;
	}

	.search-form-wrapper {
		.search-form {
			padding: 20px;

			:deep(.el-form-item) {
				margin-bottom: 18px;
			}
		}
	}
}

/* 平板横屏 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
	.left-panel {
		width: 280px;
		min-width: 280px;
	}

	.search-form-wrapper {
		.search-form {
			padding: 14px;

			:deep(.el-form-item) {
				margin-bottom: 14px;
			}

			:deep(.el-form-item__label) {
				font-size: 12.5px;
			}
		}
	}

	.main-content-layout {
		gap: 12px;
	}
}

/* 平板竖屏及以下 (<=768px) */
@media (max-width: 768px) {
	.main-content-layout {
		flex-direction: column;
		gap: 12px;
	}

	.left-panel {
		width: 100%;
		min-width: unset;

		.search-form-wrapper {
			.search-form-header {
				padding: 10px 14px;
				font-size: 13px;

				i {
					font-size: 14px;
				}
			}

			.search-form {
				padding: 14px;

				:deep(.el-form-item) {
					margin-bottom: 12px;
				}

				:deep(.el-form-item__label) {
					font-size: 12px;
					margin-bottom: 6px;
				}
			}

			.form-actions {
				margin-top: 16px;

				:deep(.el-form-item__content) {
					flex-direction: row;
					gap: 8px;
				}

				:deep(.el-button) {
					flex: 1;
					font-size: 13px;
					padding: 8px 12px;
				}
			}
		}
	}

	.right-panel {
		width: 100%;
	}

	.calendar-section {
		min-height: 500px;
	}

	/* 暗黑模式下的响应式调整 */
	[data-theme='dark'],
	.dark {
		.left-panel {
			border-right: none;
			border-bottom: 1px solid var(--next-border-color, #424242);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		}
	}
}

/* 手机屏幕 (<=480px) */
@media (max-width: 480px) {
	.main-content-layout {
		gap: 8px;
	}

	.left-panel {
		.search-form-wrapper {
			border-radius: 8px;

			.search-form-header {
				padding: 8px 12px;
				font-size: 12px;

				i {
					font-size: 13px;
				}
			}

			.search-form {
				padding: 12px;

				:deep(.el-form-item) {
					margin-bottom: 10px;
				}

				:deep(.el-form-item__label) {
					font-size: 11px;
				}

				:deep(.el-input),
				:deep(.el-select) {
					font-size: 12px;
				}
			}

			.form-actions {
				margin-top: 12px;

				:deep(.el-form-item__content) {
					flex-direction: column;
					gap: 8px;
				}

				:deep(.el-button) {
					width: 100%;
					font-size: 12px;
					padding: 8px;

					span {
						font-size: 12px;
					}
				}
			}
		}
	}

	.calendar-section {
		min-height: 400px;
	}
}

/* 超小屏幕 (<=375px) */
@media (max-width: 375px) {
	.left-panel {
		.search-form-wrapper {
			border-radius: 6px;

			.search-form {
				padding: 10px;

				:deep(.el-form-item) {
					margin-bottom: 8px;
				}
			}

			.form-actions {
				margin-top: 10px;

				:deep(.el-button) {
					padding: 6px;
					font-size: 11px;
				}
			}
		}
	}

	.calendar-section {
		min-height: 350px;
	}
}
</style>
